<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图效果</title>
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/h3.css">
</head>

<body>

  <div class="animate__animated animate__fadeInRightBig">
    动画效果
  </div>

  <hr>

  <div class="container">

    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./images/111.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./images/222.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./images/333.png" alt="">
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
  
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  
      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>

    </div>
  
  </div>
  
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/h3.js"></script>




</body>

</html>